<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('Pear Admin 开发平台')"/>
</head>
<body>
<style>
.demo-login-container{width: 320px; margin: 150px auto ;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}


</style>
<form method="post" class="layui-form">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" th:name="${un}" value="" lay-verify="required" placeholder="用户名"
                       lay-reqtext="请填写用户名"
                       autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" th:name="${pwd}" value="" lay-verify="password" placeholder="密   码"
                       lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div th:if="${captchaEnabled}" class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" th:name="${captcha}" value="" lay-verify="required" placeholder="验证码"
                               lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <img src="https://www.oschina.net/action/user/captcha"
                             onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                    </div>
                </div>
            </div>
        </div>

        <div th:if="${rm}" class="layui-form-item">
            <input type="checkbox" th:name="${remember}" lay-skin="primary" title="记住密码">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<th:block th:include="include :: footer"/>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.jquery;
  // 提交事件
  form.verify({
    username: function(value, item){
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
        return '用户名不能有特殊字符';
      }
      if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
      if(/^\d+$/.test(value)) return '用户名不能全为数字';

      // 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
      if(value === 'xxx'){
        alert('用户名不能为敏感词');
        return true;
      }
    },
    // 数组写法。
    // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
    password: [/^[\S]{6,12}$/, '密码必须为6到12位的非空字符']
  });
  form.on('submit(demo-login)', function(data){
    var field = data.field; // 获取表单字段值
    console.log(field);
    console.log(field.toString());
    console.log(JSON.stringify(field));
    //默认是contentType 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
    //默认是contentType "application/json"。发送信息至服务器时内容编码类型。
    $.ajax({
<!--            url: '/loginForm',-->
            url: '/login',
<!--            data: JSON.stringify(field),-->
            data: field,
            type: "post",
<!--            contentType:'application/json',-->
            dataType: 'json',
            success: function (result) {
                layer.close(loader);
                btn.stop(function () {
                    if (result.success) {
                        popup.success(result.msg, function () {
                            location.href = "/index";
                        })
                    } else {
                        popup.failure(result.msg, function () {
                            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
                        });
                    }
                })
            }
        });
    return false; // 阻止默认 form 跳转
  });
});












































</script>
</body>
</html>